<template>
    <div class="tuan">
   <header>
     <h1>爆爆团</h1>
     <h2>限时爆款 超级低价</h2>
   </header>
   <div class="banner">
     <div class="title">
       <h3
         @click="shandow(index)"
         v-for="(item, index) in flist"
         :key="index"
         :class="{ active: currentIndex == index }"
       >
         {{ item.name }}
       </h3>
     </div>
     <div class="center" v-show="currentIndex == 0">
       <div class="good" v-for="(item, index) in goods" :key="index">
         <img :src="item.picture" alt="" />
         <div class="left">
           <div class="name">{{ item.name }}</div>
           <div class="sale">月售：{{ item.month_saled }}</div>
           <div class="price">￥{{ item.min_price }}</div>
           <span>{{ item.promotion_info }}</span>
           <div class="sell">{{ item.unit }}</div>
           <button @click="middle(item)">
             {{ item.status == 0 ? "马上抢" : "已抢" }}
           </button>
         </div>
       </div>
     </div>
     <div class="ming" v-show="currentIndex == 1">上新预告</div>
   </div>
 </div>
</template>

<script setup>
import { tuan_list } from "../../api";
import { onMounted,ref } from 'vue'

var flist = ref([
       { name: "正在抢购", status: false },
       { name: "上新预告", status: false },
     ])

var goods = ref([])
var currentIndex = ref(0)

onMounted(()=>{
   tuan_list({status:0}).then((res) => {
       goods.value = res.data.list
   })
})
var shandow = (index) => {
   currentIndex.value = index
}

var middle = (item) => {
   if (item.status == 0) {
       item.status =1
   }
}
</script>

<style>
.tuan {
 width: 100%;
 height: 610px;
 /* background-color: antiquewhite; */
 position: fixed;
 top: 0;
}
header {
 width: 100%;
 position: fixed;
 top: 0;
 height: 150px;
 background-color: orange;
}
h1 {
 height: 50px;
 line-height: 50px;
 text-align: center;
 color: aliceblue;
}
h2 {
 text-align: center;
 margin-top: 20px;
}
.banner {
 width: 100%;
 /* flex: 1; */
 position: fixed;
 top: 150px;
 height: 470px;
 /* background-color: aqua; */
 overflow: auto;
 display: flex;
 flex-direction: column;
}
.title {
 /* width: 100%; */
 height: 40px;
 display: flex;
 margin-left: 20px;
}
h3 {
 width: 100px;
}
.center {
 width: 95%;
 margin: auto;
 border-radius: 10px;
 flex: 1;
 /* background-color: paleturquoise; */
}
.good {
 width: 100%;
 height: 120px;
 border-bottom: 1px solid #000;
 margin-top: 10px;
 display: flex;
 position: relative;
}
img {
 width: 70px;
 height: 70px;
}
.left {
 margin-left: 10px;
 flex: 1;
 line-height: 25px;
 text-align: left;
}
.sale {
 color: yellow;
}
.price {
 display: inline-block;
 color: red;
 font-weight: bolder;
 font-size: 20px;
}
span {
 display: inline-block;
 width: 50px;
 height: 20px;
 text-align: center;
 line-height: 20px;
 font-size: 14px;
 margin-left: 10px;
}
.sell {
 font-size: 12px;
}
button {
 position: absolute;
 width: 100px;
 height: 30px;
 background-color: red;
 color: white;
 border-radius: 10px;
 border: none;
 right: 20px;
 top: 30px;
}
.ming {
 width: 100%;
 height: 100%;
 font-size: 30px;
 text-align: center;
 color: rebeccapurple;
 line-height: 200px;
}
.active {
 color: red;
}
</style>